﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>成功提示页</title>
<link href="<%=path%>/favicon.ico" rel="shortcut icon">
<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/marketing/public.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/marketing/activity.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/marketing/style_list.css" />
	
<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">	
<link href="<%=path%>/css/marketing/s_style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">

<style>
.s_bg{
	background:url(<%=path%>/images/marketing/activity_success_bg.png) no-repeat;
	background-size:100% 100%;
}
.header_bg{
	background:url(<%=path%>/images/marketing/phone_header.jpg) no-repeat;
	width:100%;
	height:10%;
	padding-top: 8%;
	background-size:100% 100%;
}

.preview_border{
    border-style:solid;
    border-width:1px;
    border-color:d4d4d4;
}
.division_line{
    border-bottom: 1px solid #d4d4d4;
}
.div_line{
    border-bottom: 2px solid #d4d4d4;
}

.input_btn
{
    position: absolute;
    display: block;
    width: 100px;
    height: 30px;
    background-color: #1ab394;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font:normal normal normal 14px/30px 'Microsoft YaHei';
    cursor: pointer;
    border-radius: 4px;
}

.myFileUpload
{
    position: absolute;
    display: block;
    width: 100px;
    height: 30px;
    opacity: 0;
}
</style>

</head>
<body class="gray-bg">

  <div class="wrapper wrapper-content animated fadeInRight">
	<div class="container-fluid">
		<div class="row">      
		   <div class="col-md-12">
               <div class="col-md-8 x_progress s_big">
	            <div class="s_line" style="width:600px">
	                <div class="s_progress_bar s_current" role="progressbar"
	                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
	                    <span class="sr-only_1">1</span>
	                    <p class="x_color_bz">选择模板</p >
	                </div>
	                <div class="s_progress_bar s_current" role="progressbar"
	                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
	                    <span class="sr-only_2">2</span>
	                    <p class="x_color_bz">编辑内容</p >
	                </div>
	                <div class="s_progress_bar s_current" role="progressbar"
	                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
	                    <span class="sr-only_3">3</span>
	                    <p class="x_color_bz">成功提示页</p >
	                </div>
	                <div class="s_progress_bar" role="progressbar"
	                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
	                    <span class="sr-only_3">4</span>
	                    <p class="x_color_bz">分享设置</p >
	                </div>
	                <div class="s_progress_bar" role="progressbar"
	                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
	                    <span class="sr-only_4">5</span>
	                    <p class="x_color_bz">活动预览</p >
	                </div>
	                <div class="s_progress_bar" role="progressbar"
	                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
	                    <span class="sr-only_5">6</span>
	                    <p class="x_color_bz">分享</p >
	                </div>
	            </div>
	           </div>   
		       <div class="col-md-4 pull-right">
		            <button id="skip" class="btn btn-primary pull-right" type="button" style="margin-top:15px" onclick="javascript:skip();">跳过</button>
		       </div>
		   </div>
		   
		   <div class="col-md-12 white-bg" style="padding-top:40px;padding-bottom:30px">
		       <div class="col-md-5">
		          <div class="col-md-2">
		          </div>
		          <div class="col-md-8 text-center preview_border" style="padding:0px">
		             <div class="header_bg">
		                 <h3 id="activityName" style="color:#ffffff"></h3>
		             </div>
		             <div class="s_bg" style="padding:10px">
		                 <p id="successHintPreview" class="text-center" style="color:white;font-size:16px;">恭喜您成功参与本次活动</p>
		                 <div id="successExplainPreview" style="padding:20px;color:white;font-size:14px;">优惠券即将发送到您的手机中，为了避免您的手机收不到短信，请长按下方二维码关注公众号，在我的优惠劵中查看</div>
		                 <button id="btnShowCouponList" class=" btn btn-w-m btn-white">点击查看券列表</button>
		             </div>
		             <div id="recommendActivityPreview" class="col-md-12" style="margin-top:15px;padding:0px">
		                 <div class="col-md-12">
		                     <div class="col-md-2"></div>
			                 <div class="col-md-2 div_line" style="margin-top:12px"></div>
			                 <h4 class="col-md-4">推荐活动</h4>
			                 <div class="col-md-2 div_line" style="margin-top:12px"></div>
			                 <div class="col-md-2"></div>
		                 </div>
		                 
		                 <div class="col-md-12" style="margin-top:15px;padding:0px">
		                     <ul id="recommendActivityList">
		                       
		                     </ul>
		                 </div>
		             </div>
		             
		             <div id="qrcodePreview" class="col-md-12 text-center" style="margin-bottom:15px;margin-top:20px">
		                     <h6 id="qrcodeHintPreview">长按识别二维码</h6>
		                     <img  class="qrcodeImg" style="width:80px;height:80px" src="<%=path%>/images/marketing/icon_wb.png">
		             </div>
		             
		          </div>
		          <div class="col-md-2">
		          </div>
		       </div>
		       <!-- 右侧 -->
		       <div class="col-md-6">
		          <form class="form-horizontal" id='uploadPic' enctype='multipart/form-data'>
		              <div class="form-group">
	                     <label class="col-sm-4 control-label">注册成功提示</label>
	                     <div class="col-sm-6">
	                        <input id="successHint" type="text" class="form-control" placeholder="恭喜您成功参与本次活动" maxlength="15" onblur="checkLength(this)" oninput="reloadRight()">
	                     </div>
	                  </div>
		              <div class="form-group">
	                     <label class="col-sm-4 control-label">上传背景图</label>
	                     <div class="col-sm-2">
	                        <a href='javascript:void(0);' class="input_btn">上传背景</a>
	                        <input id="name" class="myFileUpload" type="file" accept="image/*" class="form-control" name="filepath" maxlength="15" onchange="uploadPic(0)">
	                     </div>
	                     <div class="col-sm-3"><h6>图片尺寸：650*300</h6></div>
	                  </div>
	                  <div class="form-group">
	                     <label class="col-sm-4 control-label">提示说明区</label>
	                     <div class="col-sm-6">                      
	                        <textarea id="successExplain" name="comment" class="form-control" placeholder="提示客户成功参与活动，可进一步告知客户活动后续操作" required="" aria-required="true" style="height:100px" oninput="reloadRight()"></textarea>                       
	                     </div>
		              </div>
		              <div class="form-group">
	                    <label class="col-sm-4 control-label">券列表按钮</label>
	                    <div class="col-sm-6" >
	                        <div class="radio i-checks col-sm-4" style="margin-left:-21px">
	                            <label class="operation">
	                                <input type="radio" id="showCouponListNo" name="showCouponList" value="5"> <i></i>不显示</label>
	                        </div>
	                        <div class="radio i-checks  col-sm-4 text-left">
	                            <label class="operation">
	                                <input type="radio" checked="" id="showCouponListYes" name="showCouponList" value="10"> <i></i>显示</label>
	                        </div>
	                    </div>
	                  </div> 
	                  <div class="form-group">
                         <label class="col-sm-4 control-label"></label>
	                     <h6 class="col-md-2" style="margin-top:13px">编辑文案</h6>      
	                     <div class="col-md-4" style="margin-left:-40px">  
	                        <input id="btnText" type="text" class="form-control" oninput="reloadRight()">     
	                     </div>
		              </div> 
	                  <div class="form-group">
	                     <div class="checkbox i-checks col-md-4">
                             <label class="pull-right"><input id="recommendBox" type="checkbox" value="">推荐活动</label>
                         </div>
	                     <div class="panel panel-default col-md-6"style="width:45.5%;margin-left:15px;min-height:60px">
							<div class="panel-body">
								<ul id="recommendlist">
									
								</ul>
							</div>
					     </div>

	                     <a id="choseRecommendActivity" style="margin-top:40px;"><font color="#1ab394">选择推荐</font></a>
		              </div>
	                  <div class="form-group">
	                     <div class="checkbox i-checks col-md-4">
                             <label class="pull-right"><input id="qrcodeBox" type="checkbox" value="">设置二维码</label>
                         </div>
	                     <h6 class="col-md-2" style="margin-top:13px">二维码提示</h6>      
	                     <div class="col-md-4" style="margin-left:-40px">  
	                        <input id="qrcodeHint" type="text" class="form-control" oninput="reloadRight()">     
	                     </div>
		              </div>
	                  <div class="form-group">
                         <label class="col-sm-4 control-label"></label>
	                     <h6 class="col-md-2" style="margin-top:13px">上传二维码</h6>      
	                     <div class="col-md-4" style="margin-left:-40px">  
	                       <div class="x_pt_h">
                                <div class="x_img_sc"><img id="card_image" class="qrcodeImg" src="<%=path%>/images/marketing/img_p.png" height="100%" width="100%"></div>
                                <input type="file" accept="image/*" id="x_inputfile" onchange="uploadPic(1)" name="filepath" style=" filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.0; position:absolute; z-index:99;">
                            </div>
	                     </div>
		              </div> 
		              
		               <div class="form-group" style="margin-top:40px">
	                     <label class="col-sm-4 control-label"></label>
	                     <div class="col-sm-6">                      
		                     <button id="btnSave" type="button" class="btn  btn-warning " onclick="javascript:save();">暂存</button>
		                     <button id="btnNext" type="button" class="btn  btn-primary " style="margin-left:25px" onclick="javascript:next();">下一步</button>
	                     </div>
		              </div>
		          </form>
		       </div>
		   
		   </div>
        </div>
	</div>
  </div>
	
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
<script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script type="text/javascript">

$(document).on('ifChecked', '#showCouponListNo', function() {
	isShowCouponList=0;
	$('#btnShowCouponList').hide();
});

$(document).on('ifChecked', '#showCouponListYes', function() {
	isShowCouponList=1;
	$('#btnShowCouponList').show();
});

$(document).on('ifChecked', '#recommendBox', function() {
	isShowRecommendActivity=1;
	$('#recommendActivityPreview').show();
});

$(document).on('ifUnchecked', '#recommendBox', function() {
	isShowRecommendActivity=0;
	$('#recommendActivityPreview').hide();
});

$(document).on('ifChecked', '#qrcodeBox', function() {
	isShowQrcode=1;
	$('#qrcodePreview').show();
});

$(document).on('ifUnchecked', '#qrcodeBox', function() {
	isShowQrcode=0;
	$('#qrcodePreview').hide();
});

$(document).on('click','#choseRecommendActivity',function funcRecommendActivityDialog(){
    Activity_TuijianDetailDialog = dialog({
        id: "Activity_TuijianDetailDialog",
        fixed: true,
        width: 1000,
        height: 500,
        title: '活动列表',
        url: path + "/view/ui/tuijianDetailDialog",
    });
    Activity_TuijianDetailDialog.showModal();
    $("iframe[name='Activity_TuijianDetailDialog']:visible").attr("scrolling", "auto").css("overflow-x", "hidden").css("overflow-y", "auto");
})

 //打叉移除选择的推荐活动
 $(document).on('click','.deleteRecommend',function(){
 	var indexNum=$(this).attr("indexNum");
 	var activityId=$(this).attr("activityId");
 	var lineId="."+this.id;
 	list3.splice(indexNum,1);
 	recommendActivityIdList.splice($.inArray(activityId,recommendActivityIdList),1);
 	$(lineId).remove();
 }); 
      
function reloadRight(){
	$('#successHintPreview').html($('#successHint').val());
	$('#successExplainPreview').html($('#successExplain').val());
	$('#btnShowCouponList').html($('#btnText').val());
	$('#qrcodeHintPreview').html($('#qrcodeHint').val());
}
</script>


<script type="text/javascript">
var access_token=$.cookie('access_token');
var cid=$.cookie('cid');
var uid=$.cookie('uid');
var path = "<%=path%>";
var activityId="";
var operationType="";
var successTip="";
var successDescription="";
var listButtonText="";
var isShowCouponList=1;
var recommendActivityIds="";
var isShowRecommendActivity=0;
var isShowQrcode=0;
var qrcodeTip="";
var bgPic="";
var qrcodePic="";
var id="";

var maxRecommendActivitySize=3;
var list3;  //我推荐列表
var recommendActivityIdList=new Array();//推荐活动的idList
var nextFlag=false;
var saveFlag=false;
var activityName="";
$(function(){
	activityId=getQueryString("activityId");
	activityName=$.cookie(activityId);
	operationType=getQueryString("type");
	if(StringEmpty(activityName)){
	   $('#activityName').html(activityName);
    }
	if(operationType == "edit"){
		getDetail();
	}else if(operationType == "copy"){
		getDetail();
	}
	$(document).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});
})

//获取详情
function getDetail(){
	var url = "<%=path%>/activitySuccessPage/ajaxDetailByActivityId";
	$.post(url, {
		"access_token" : access_token,
		"cid" : cid,
		"uid" : uid,
		"activityId" : activityId,
	}, function(data) {
		if (data.status == 200) {
			saveFlag=true;
			initHtml(data.data);
			list3=data.recommendActivityData;
			showBack3();
		} else {
		}
	});
}
//初始化页面
function initHtml(data){
	 id=data.id;
	 successTip=data.successTip;
	 successDescription=data.successDescription;
	 listButtonText=data.listButtonText;
	 isShowCouponList=data.isShowCouponList;
	 recommendActivityIds=data.recommendActivityIds;
	 isShowRecommendActivity=data.isShowRecommendActivity;
	 isShowQrcode=data.isShowQrcode;
	 qrcodeTip=data.qrcodeTip;
	 bgPic=data.bgPic;
	 qrcodePic=data.qrcodePic;
	 
	 $('#successHint').val(successTip);
	 $('#successHintPreview').html(successTip);
	 $('#successExplain').val(successDescription);
	 $('#successExplainPreview').html(successDescription);
	 $('#btnText').val(listButtonText);
	 $('#btnShowCouponList').html(listButtonText);
	 $('#qrcodeHint').val(qrcodeTip);
	 $('#qrcodeHintPreview').html(qrcodeTip);
	 
	 if(StringEmpty(bgPic)){
		 $(".s_bg").css("background-image", "url(" + bgPic + ")");
	 }
	 if(StringEmpty(qrcodePic)){
		 $('.qrcodeImg').attr("src",qrcodePic);
	 }
	 //判断是否显示券列表按钮
	 if(isShowCouponList){
		 $('#showCouponListYes').attr("checked","checked");
 		 $('#showCouponListYes').parent().addClass("checked");
 		 $('#showCouponListNo').removeAttr("checked");
		 $('#showCouponListNo').parent().removeClass("checked");
		 $('#btnShowCouponList').show();
	 }else{
		 $('#showCouponListNo').attr("checked","checked");
 		 $('#showCouponListNo').parent().addClass("checked");
 		 $('#showCouponListYes').removeAttr("checked");
		 $('#showCouponListYes').parent().removeClass("checked");
		 $('#btnShowCouponList').hide();
	 }
	 if(isShowRecommendActivity){
		 $("#recommendBox").attr("checked","checked"); 
		 $("#recommendBox").parent().addClass("checked");
		 $('#recommendActivityPreview').show();
	 }else{
		 $('#recommendActivityPreview').hide();
	 }
	 if(isShowQrcode){
		 $("#qrcodeBox").attr("checked","checked"); 
		 $("#qrcodeBox").parent().addClass("checked");
		 $('#qrcodePreview').show();
	 }else{
		 $('#qrcodePreview').hide();
	 }
	 
}
//保存
function save(){
	 successTip=$('#successHint').val();
	 successDescription=$('#successExplain').val();
	 listButtonText=$('#btnText').val();
	 recommendActivityIds=recommendActivityIdList.join(",");;
	 qrcodeTip=$('#qrcodeHint').val();
	 if(saveFlag){
		 update();
	 }else{
		 create();
	 }
}

//创建
function create(){
	var url = "<%=path%>/activitySuccessPage/ajaxCreate";
	$.post(url, {
		"access_token" : access_token,
		"cid" : cid,
		"tenantId" : cid,
		"uid" : uid,
		"activityId" : activityId,
		"id" : id,
		"successTip" : successTip,
		"successDescription" : successDescription,
		"listButtonText" : listButtonText,
		"isShowCouponList" : isShowCouponList,
		"recommendActivityIds" : recommendActivityIds,
		"isShowRecommendActivity" : isShowRecommendActivity,
		"isShowQrcode" : isShowQrcode,
		"bgPic" : bgPic,
		"qrcodePic" : qrcodePic,
		"qrcodeTip" : qrcodeTip,
	}, function(data) {
		if (data.status == 200) {
			if(nextFlag){
				skip();
			}else{
				successDialog("保存成功");
			}
		} else {
			errorDialog("保存失败","");
		}
	});
}

//更新
function update(){
	var url = "<%=path%>/activitySuccessPage/ajaxEdit";
	$.post(url, {
		"access_token" : access_token,
		"cid" : cid,
		"tenantId" : cid,
		"uid" : uid,
		"activityId" : activityId,
		"id" : id,
		"successTip" : successTip,
		"successDescription" : successDescription,
		"listButtonText" : listButtonText,
		"isShowCouponList" : isShowCouponList,
		"recommendActivityIds" : recommendActivityIds,
		"isShowRecommendActivity" : isShowRecommendActivity,
		"isShowQrcode" : isShowQrcode,
		"bgPic" : bgPic,
		"qrcodePic" : qrcodePic,
		"qrcodeTip" : qrcodeTip,
	}, function(data) {
		if (data.status == 200) {
			if(nextFlag){
				skip();
			}else{
				successDialog("保存成功");
			}
			
		} else {
			errorDialog("保存失败","");
		}
	});
}


function next(){
	nextFlag=true;
	save();
}

function skip(){
	window.location.href = "<%=path%>/view/ui/editActivityShare?activity_id="+activityId;
}

var flag=false;
var picType=0;
function uploadPic(type) {
	picType=type;
    $("#uploadPic").submit(function (event) {
        if(flag){
            return ;
        }
        flag=true;
        $("#uploadPic").ajaxSubmit({
            type: "post",
            url: "<%=path%>/api/uploadfile/file",
            data:{"typename":"filepath"},
            success: function (data1) {
            	setPic(data1.realSavePath);
            },
            error: function (msg) {
                promptDialog("文件上传失败");
            }
        });
        return false;
    });
    flag=false;
    $("#uploadPic").submit();
}

function setPic(picUrl){
	switch (picType) {
	case 0:
		bgPic=picUrl;
        if(StringEmpty(bgPic)){
        	$(".s_bg").css("background-image", "url(" + bgPic + ")");
        }
		break;
    case 1:
    	qrcodePic=picUrl;
        if(StringEmpty(qrcodePic)){
        	$('.qrcodeImg').attr("src",qrcodePic);
        	$("#qrcodeBox").attr("checked","checked"); 
   		    $("#qrcodeBox").parent().addClass("checked");
   		    $('#qrcodePreview').show();
   		    isShowQrcode=1;
        }
		break;
	default:
		break;
	}
}

//推荐活动回调
function showBack3(){
	var recommendListHtml="";
	var html="";
    for(var i in list3){
    	recommendActivityIdList[i]=list3[i].id;
    	
    	recommendListHtml+='<li class="surrent col-md-12 line'+list3[i].id+'" style="margin-top:15px">';
    	recommendListHtml+='<div class="col-md-3">';
    	recommendListHtml+='<img style="width:80px;height:80px" alt="" src="'+list3[i].pic+'"></div>';
    	recommendListHtml+='<div class="col-md-8" style="margin-left:10px">';
    	recommendListHtml+='<h5 style="text-align:left">'+list3[i].name+'</h5>';
    	recommendListHtml+='<h6 style="text-align:left">'+list3[i].content+'</h6>';
    	recommendListHtml+='</div></li>';
    	
    	html += '<li  indexNum="'+list3[i].id+'" class="line'+list3[i].id+' col-md-6 text-left" cid="'+list3[i].name+'" >'+list3[i].name+'<img indexNum="'+i+'" id="line'+list3[i].id+'" activityId="'+list3[i].id+'"  src="<%=path%>/images/marketing/close.png" class="deleteRecommend"></li>';
    }
    $('#recommendActivityList').html(recommendListHtml);
    $('#recommendlist').html(html);
    
    /* $("#recommendBox").attr("checked","checked"); 
	$("#recommendBox").parent().addClass("checked");
	isShowRecommendActivity=true; */
}
</script>
   
</body>
</html>